<template>
	<div class="wrapper">
		<img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" alt="">
		<div class="wrapper__input">
			<input type="text" v-model="username"
				   class="wrapper__input__content"  placeholder="请输入用户名">
		</div>
		<div class="wrapper__input">
			<input type="password" autocomplete="new-password" v-model="password"
				   class="wrapper__input__content"  placeholder="请输入密码">
		</div>
		<div class="wrapper__input">
			<input type="password" autocomplete="new-password" v-model="rePassword"
				   class="wrapper__input__content"  placeholder="请确认密码">
		</div>
		<div class="wrapper__register--button" @click="handleRegister">立即注册</div>
		<div class="wrapper__register--link" @click="handleLogin">已有账号？立即登录</div>
		<Toast v-if="show" :message="toastMsg" />
	</div>
</template>

<script>
import {useRouter} from 'vue-router';
import {reactive, toRefs} from "vue";

import {post} from "@/utils/request";
import Toast, {useToastEffect} from "@/components/Toast";

const useLoginEffect = () => {
	const router = useRouter();
	const handleLogin = ()=>{
		router.push({ name:'login' });
	}
	return { handleLogin }
}

const useRegisterEffect = (showToast) =>{
	const router = useRouter();
	const data = reactive({username: '', password: '', rePassword:''})

	const handleRegister = async () => {
		try {
			const result = await post('/api/user/register', {
				username: data.username,
				password: data.password,
			})
			if(!(password === rePassword)){
				showToast("前后密码输入不一致")
			}
			if (result?.errno === 0) {
				router.push({name: 'Login'})
			}
			else {
				showToast("注册失败")
			}
		} catch (e) {
			showToast("网络错误")
		}
	}
	const {username, password, rePassword} = toRefs(data)
	return {username, password, rePassword, handleRegister}
}

export default {
	name: "Register",
	components:{Toast},
	setup(){
		const { show, showToast, toastMsg } = useToastEffect();
		const {username, password, rePassword, handleRegister} = useRegisterEffect(showToast)
		const { handleLogin } = useLoginEffect();

		return {handleLogin, show, toastMsg,	username, password, rePassword,	handleRegister}
	}
}
</script>

<style scoped lang="scss">
@import "src/style/viriables.scss";
.wrapper{
	position: absolute;
	top:50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	&__img{
		width: .66rem;
		height: .66rem;
		display: block;
		margin: 0 auto .44rem auto;
	}
	&__input{
		box-sizing: border-box;
		height: .48rem;
		margin: 0 .4rem .16rem .4rem;
		background: #f9f9f9;
		border-radius: 6px;
		border: 1px solid rgba(0,0,0,0.1);
		padding: 0 .16rem;
		&__content{
			line-height: .48rem;
			background: none;
			border: none;
			outline: none;
			width: 100%;
			font-size: .16rem;
			&::placeholder{
				color: $shadow_fontcolor;
			}
		}
	}
	&__register--button{
		margin: .32rem .4rem .16rem .4rem;
		line-height: .48rem;
		font-size: .16rem;
		text-align: center;
		background: #0091ff;
		box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
		border-radius: .04rem;
		color: $bgcolor;
	}
	&__register--link{
		font-size: .14rem;
		color: $shadow_fontcolor;
		text-align: center;
	}
}
</style>